<script setup>
import { deleteRole } from '@/api/roles';
import { timeFormatter } from '@/utils/timeHandlers';
import DlgRoleCreateOrEdit from './DlgRoleCreateOrEdit.vue';
import { queryRoles,queryCondition,queriedResult } from '@/composables/useRoles';
queryRoles()

const dlgCreateOrEdit = ref()

//删除角色
const handleDelete = async (id) => {
   await ElMessageBox.confirm('确认删除该角色吗？', '删除询问', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning'
}).catch(() =>{
  ElMessage.success('已取消删除')
  
})

//通过接口执行删除操作
const {data} = await deleteRole(id)
if(data.code === '000000'){
    ElMessage.success('删除成功')
   queryRoles()
}else{
    ElMessage.error('删除角色失败')
    throw new Error('删除角色失败')
}
}
</script>

<template>
 <el-card class="box-card">
    <template #header>
          <el-button @click="dlgCreateOrEdit.initAndShow()">新建角色</el-button>
     <el-form :inline="true" :model="queryCondition" class="demo-form-inline">
    <el-form-item label="输入搜索">
      <el-input v-model="queryCondition.name" placeholder="角色名称" clearable />
    </el-form-item>
   
    
    <el-form-item>
       <el-button type="primary" @click="queryCondition.name = ''">重置</el-button>
      <el-button type="primary" @click="queryRoles()">查询</el-button>
    </el-form-item>
  </el-form>
    </template>
    
    <el-table :data="queriedResult.records" border style="width: 100%">
    <el-table-column type="index" label="序号" align="center"/>
    <el-table-column prop="name" label="角色名称"  align="center"/>
    
    <el-table-column prop="description" label="描述"  align="center"/>
   <el-table-column prop="createdTime" label="创建时间" :formatter="timeFormatter" align="center"/>
    
  <el-table-column label="操作" align="center" width="150px" v-slot="{row}">
   <!--  传到alloc-menus页面并且把id传过去 -->
  <el-button type="primary" link @click="$router.push({name: 'alloc-menus' , params: { roleId: row.id}})">分配菜单</el-button>
  <el-button type="primary" link @click="$router.push({name: 'alloc-resources' , params: { roleId: row.id}})">分配资源</el-button>
  <el-button type="primary" link @click="dlgCreateOrEdit?.initAndShow(row.id)">编辑</el-button>
  <el-button type="primary" link @click="handleDelete(row.id)">删除</el-button>
</el-table-column>

    </el-table>
 <el-pagination
      v-model:current-page="queryCondition.current"
      v-model:page-size="queryCondition.size"
      :page-sizes="[5,10,20,30]"
     
      layout="total, sizes, prev, pager, next, jumper"
      :total="queriedResult.total"
      @size-change="(size) => {
        queryRoles({size})
      }"
      @current-change="(current) => {
        queryRoles({current})
      }"
    />
    <DlgRoleCreateOrEdit ref="dlgCreateOrEdit" @role-change="queryRoles()" />
  </el-card>
</template>

<style scoped>
.el-table {
  margin-bottom: 17px;
}
.el-form{
  float:right;
}
.card-header {
    display: flex;
  justify-content: space-between;
  align-items: center;
}
.text {
    font-size: 14px;
}
.item {
    margin-bottom:18px;
}
.box-card {
    width:auto;
}

</style>
